<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>滚动条demo</title>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var _obj = $("#dragBox");
            var _container = $(".container");

            var movestart = function(e){

                var _x = e.pageX;
                var _y = e.pageY;
                var _startX = $(_obj).offset().left;
                var _startY = $(_obj).offset().top;

                var move = function(e){
                    var _right = 0;
                    var _top = e.pageY - _y + _startY -  _container.offset().top;

                    if(_top < 0){
                        _top = 0;
                    }

                    if(_top > _container.height() - _obj.height()){
                        _top = _container.height() - _obj.height();
                    }

                    $(_obj).css({right:_right,top:_top});

                    $('.scollerBox').css({top: -_top});
                };

                var movestop = function(){
                    $(document).unbind("mousemove");
                    $(document).unbind("mouseup");
                };

                $(document).bind("mousemove",move);
                $(document).bind("mouseup",movestop);
            };


            $(document).bind("mousedown",movestart)
        })
    </script>
</head>
<style>
    .container{width: 800px;height: 300px;border: 1px solid #ccc;margin: 0 auto;position: relative;overflow-y: hidden}
    .scollerBox{position: absolute;top:0;left: 0;width: 100%}
    #dragBox{width: 10px;height: 180px;background-color: #660033;position: absolute;top: 0;right: 0;border-radius: 8px;opacity: 0.2;box-shadow: 5px 5px 5px #ccc}
</style>
<body>
    <div class="container">
        <div class="scollerBox">
            ppp1111<br>
            ppp222<br>
            ppp333<br>
            ppp444<br>
            ppp555<br>
            ppp666<br>
            ppp777<br>
            ppp888<br>
            ppp999<br>
            ppp101010<br>
            ppp222212312<br>
            ppp313sdfsdad<br>
            pppsdasfffgg<br>
            pppsddddsfs<br>
            pppghghghg<br>
            pppadfxcvxcvx<br>
            ppp66353534<br>
            ppp999999<br>
            pppbnm,kkk<br>
            pppfasfdaf<br>
            pppzzzzzzzzzzzzzzz<br>
            ppp222<br>
            pppgggggggggggg<br>
            pppgssssssssssssss<br>
            pppccccccccc<br>
            pppcchhhhhhhhhh<br>
            pppooooo<br>
            pppmmmmmmmmmmm<br>
            pppzzzzzzzzzzzzzz<br>
            ppp6666666666666<br>
            pppkkkkkkkkkkk<br>
            pppccccccccccccccc<br>
            pppfsafsssssssssssss<br>
            pppmmmmmmmmmmmmmmmmm<br>
            pppllllllllllllllll<br>
            pppkkkkkkkkkkkkkk<br>
            pppjjjjjjjjjjjjjjjjjjjjj<br>
            ppphhhhhhhhhhhhhhhhhhhh<br>
            pppuuuuuuuuuuuuuuuuuuu<br>
            pppyyyyyyyyyyyyyyyy<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
            ppp<br>
        </div>
        <div id="dragBox"></div>
    </div>
</body>
</html>